<template>
    <div class="big_box">
        <div class="content1">
            <span>场馆添加编辑</span>
            <button> &lt; 返回</button>
        </div>
        <div class="content2">
            <el-form ref="ruleFormRef" :model="fromadd" :rules="rules" label-width="120px" class="demo-ruleForm"
                :size="formSize" status-icon>
                <el-row>
                    <el-col :span="13">
                        <el-form-item label="场馆名称" prop="name">
                            <el-input v-model="fromadd.name" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="13">
                        <el-form-item label="电话" prop="phone" required>
                            <el-input v-model="fromadd.phone" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 地址下拉列表 -->
                <div class="dizhi">
                    <span>地址 &nbsp;</span>
                    <el-cascader v-model="value" prop="address" :options="options" @change="handleChange" />
                </div>
                <!-- 定位 -->
                <div class="dinwei">
                    <el-row>
                        <el-col :span="10">
                            <el-input v-model="ruleForm.nam" />
                        </el-col>
                        <el-col :span="3" class="dinweibutton">
                            <el-button type="primary">定位</el-button>
                        </el-col>
                    </el-row>
                </div>
                <div class="youxiang">
                    <el-row>
                        <el-col :span="13">
                            <el-form-item label="邮箱" prop="email">
                                <el-input v-model="ruleForm.name" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <el-row>
                    <el-col :span="13">
                        <el-form-item label="排序" prop="id" required>
                            <el-input v-model="fromadd.id" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="状态" prop="state" required>
                    <el-radio-group v-model="fromadd.resource">
                        <el-radio label="启用" />
                        <el-radio label="禁用" />
                    </el-radio-group>
                </el-form-item>
                <el-row>
                    <el-col :span="4">
                        <el-form-item label="展示图片" prop="image">
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <!-- <div class="demo-image"> -->
                        <div v-for="fit in fits" :key="fit" class="block">
                            <span class="demonstration">{{ contain }}</span>
                            <el-image style="width: 100px; height: 100px" :src="url" :fit="fit" />
                        </div>

                        <!-- </div> -->
                    </el-col>
                    <el-col :span="5">
                        <!-- <div class="demo-image"> -->
                        <div v-for="fit in fits" :key="fit" class="block">
                            <span class="demonstration">{{ contain }}</span>
                            <el-image style="width: 100px; height: 100px" :src="url" :fit="fit" />
                        </div>

                        <!-- </div> -->
                    </el-col>
                </el-row>
                <el-row class="scbutton">
                    <el-col :span="12">
                        <el-upload v-model:file-list="fileList" class="upload-demo"
                            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple
                            :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :limit="3"
                            :on-exceed="handleExceed">
                            <el-button type="primary">上传图片</el-button>
                            <template #tip>
                                <div class="el-upload__tip">
                                    jpg/png files with a size less than 500KB.
                                </div>
                            </template>
                        </el-upload>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="13">
                        <el-form-item label="内容" prop="introduce">
                            <el-input v-model="ruleForm.desc" type="textarea" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="是否默认场馆" prop="resource">
                    <el-radio-group v-model="ruleForm.resource">
                        <el-radio label="是" />
                        <el-radio label="否" />
                    </el-radio-group>
                </el-form-item>
                <div class="tishi">当用户无法定位时，系统默认推送显示默认场馆给到用户，默认场馆只允许一个</div>
                <el-form-item label="用途" prop="useto">
                    <el-checkbox-group v-model="ruleForm.type">
                        <el-checkbox label="上团课" name="type" />
                        <el-checkbox label="上私教课" name="type" />
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <div class="tijiao">
            <el-form-item>
      <el-button type="primary" @click="submitForm()">
        提交
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">清空</el-button>  
    </el-form-item></div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref,onMounted } from 'vue'
import type { FormInstance, FormRules, watchEffect } from 'element-plus'
import {venuesHook} from "../hooks/venuesHooks";
import VenuesStore from '../store/VenuesStore'
import { useRouter, useRoute } from "vue-router";
const store = VenuesStore();
const route = useRoute()
const venuesHooks = venuesHook()    
let updateId = route.query.id ;
let type = route.query.type;
console.log("type",type)
const fromadd = ref<object>({
    address: "",
    capacity: "",
    createTime: "",
    deleted: "",
    email: "",
    id: "",
    image: "",
    introduce: "",
    name: "",
    phone: "",
    state:"",
    updateTime:"",
    useto: "",
    vecomment: ""
});
const submitForm = () => {
    venuesHooks.add_Venues({...fromadd.value})
}

const fits = ['contain']
const url =
    'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    name: '',
})

const rules = reactive<FormRules>({
    name: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
})



const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
}))
</script>
<style lang="less" scoped>
.big_box {
    border: 1px solid #F2F2F2;
}

.content1 {
    height: 50px;
    background-color: rgb(242, 242, 242);
    margin-bottom: 40px;

    span {
        line-height: 50px;
    }

    >button {
        float: right;
        width: 70px;
        height: 30px;
        font-size: 13px;
        text-align: center;
        line-height: 30px;
        border-radius: 8px;
        color: #999999;
        background-color: #FFFFFF;
        border: 1px solid rgb(228, 228, 228);
        margin-top: 10px;
    }
}

.content2 {
    width: 900px;
    // border: 1px solid red;
    margin: 0 auto;

    .tishi {
        font-size: 15px;
        color: rgb(153, 153, 153);
        margin-bottom: 20px;
        margin-left: 20px;
    }
    .scbutton{
        margin-left: 120px;
    }
}

.dizhi {
    span {
        margin-left: 80px;
    }
}

.dinwei {
    margin-left: 120px;

    .dinweibutton {
        margin-left: 10px;
    }
}

.youxiang {
    margin-top: 20px;
}
.tijiao{
    margin-left: 120px;
    }
// 图片框
.demo-image .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    display: inline-block;
    width: 20%;
    box-sizing: border-box;
    vertical-align: top;
}

.demo-image .block:last-child {
    border-right: none;
}

.demo-image .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}
</style>